<template>
	<view class="main-box">
		<view class="navigator-bar" :style="{'padding-top': safeTop + 'px'}">
			<image class="back-img" src="/static/backArrow2.png" @click="back()"></image>
			<text class="page-title">活动</text>
			<view class="submit-button" @click="publishActivity()">发布</view>
		</view>
		<scroll-view scroll-y="true" class="activity-content-list"
			:style="{'height': `calc(100% - ${safeTop}px - 86rpx)`}">
			<view class="content-item-box" style="margin-top: 32rpx;">
				<input v-model="activity.name" class="name-input" placeholder="输入活动名称" />
			</view>
			<view class="line"></view>
			<view class="content-item-box">
				<text class="item-title">活动开始日期</text>
				<view class="item-content-box">
					<picker mode="date" @change="dateChange">
						<text class="content-text">{{ date }} {{ week }}</text>
					</picker>
					<image class="arrow-img" src="/static/enterArrowW.png"></image>
				</view>
			</view>
			<view class="line"></view>
			<view class="content-item-box">
				<text class="item-title">活动开始时间</text>
				<view class="item-content-box">
					<picker mode="time" @change="timeChange">
						<text class="content-text">{{ time }}</text>
					</picker>
					<image class="arrow-img" src="/static/enterArrowW.png"></image>
				</view>
			</view>
			<view class="line"></view>
			<view class="content-box">
				<view class="content-item-box">
					<text class="item-title">活动地点</text>
					<view class="item-content-box">
						<image class="location-img" src="/static/formLocation.png" @click="choosePlace()"></image>
						<!-- <image class="collect-img" src="/static/formCollect.png"></image> -->
					</view>
				</view>
				<view class="location-box">
					<image class="location-img" src="/static/fp-mapCheck.png"></image>
					<view class="location-content-box">
						<text class="location-title">{{ poi.name }}</text>
						<text class="location-text">{{ poi.address }}</text>
					</view>
				</view>
			</view>
			<view class="content-item-box">
				<text class="item-title">参与人数</text>
				<view class="item-content-box">
					<input class="content-input" placeholder="请输入最大参与人数" v-model="activity.maxPerson" />
					<text class="content-text">人</text>
				</view>
			</view>
			<view class="line"></view>
			<view class="content-item-box">
				<text class="item-title">性别限制</text>
				<view class="item-content-box">
					<picker @change="sexChange" :range="sexList">
						<text class="content-text">{{ sexList[activity.sex] }}</text>
					</picker>
					<image class="arrow-img" src="/static/enterArrowW.png"></image>
				</view>
			</view>
			<view class="line"></view>
			<view class="content-item-box">
				<text class="item-title">人均费用</text>
				<view class="item-content-box">
					<input class="content-input" placeholder="请输入人均费用" v-model="activity.cost" />
					<text class="content-text">元</text>
				</view>
			</view>
			<view class="line"></view>
			<view class="content-item-box">
				<text class="item-title">信用分限制</text>
				<view class="item-content-box">
					<picker @change="scoreChange" :range="scoreList">
						<text class="content-text">{{ scoreList[score] }}</text>
					</picker>
					<image class="arrow-img" src="/static/enterArrowW.png"></image>
				</view>
			</view>
			<view class="line"></view>
			<view class="content-box">
				<view class="content-item-box">
					<text class="item-title">简介</text>
				</view>
				<textarea class="introduction-input" placeholder="写点什么..." v-model="activity.description"></textarea>
			</view>
			<view class="line"></view>
			<view class="content-box" style="padding: 0;">
				<view class="content-item-box">
					<text class="item-title">标签(最多5个)</text>
				</view>
				<view class="labels-box">
					<view class="label" v-for="label of labels">{{ label }}</view>
					<view class="add-label" @click="addLabel()">
						<image class="add-label-img" src="/static/addPic1.png"></image>
					</view>
				</view>
			</view>
			<view class="content-box">
				<view class="content-item-box">
					<text class="item-title">活动图片</text>
				</view>
				<view class="img-list-box">
					<view class="img-item" v-for="img of imgs">
						<view class="img-box">
							<image class="img" :src="img" mode="aspectFill"></image>
							<image class="close-img" src="/static/picDelete.png" @click="removeImage(img)"></image>
						</view>
						<view class="cover" v-if="img === activity.cover">封面</view>
						<view class="choose-cover" v-if="img !== activity.cover" @click="chooseCover(img)">设为封面</view>
					</view>
					<view class="add-img-box" @click="addImage()">
						<image class="add-img" src="/static/addPic1.png"></image>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				date: new Date(),
				safeTop: 0,
				week: '请选择日期',
				date: '',
				time: '请选择时间',
				activity: {
					name: '',
					maxPerson: '',
					cost: '',
					description: '',
					sex: 2,
					cover: '',
					score: 0
				},
				score: 0,
				sexList: ['只限女生', '只限男生', '男女不限'],
				scoreList: ['不限制', '100分以上', '200分以上', '300分以上', '400分以上', '500分以上', '600分以上', '700分以上'],
				labels: [],
				imgs: [],
				maxImgNum: 9,
				poi: {},
				edit: false
			};
		},
		onLoad(q) {
			this.safeTop = this.$safeTop;
			uni.$on('chooseLabel', (labels) => {
				this.labels = labels;
			});
			uni.$on('choosePoi', (poi) => {
				console.log(poi);
				this.poi = poi;
			});
			if (q.id) {
				this.getActivityDetail(q.id);
				this.edit = true;
			} else {
				this.getLocation();
			}
		},
		methods: {
			getLocation() {
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: (res) => {
						console.log(res);
						const address = res.address;
						if (address.poiName) {
							this.poi = {
								name: address.poiName,
								address: address.city + address.district + address.street + address
									.streetNum,
								location: {
									latitude: res.latitude,
									longitude: res.longitude
								}
							}
						}
					}
				})
			},
			getActivityDetail(id) {
				const params = {
					id: id
				}
				this.$apis.getActivityDetail(params).then(res => {
					if (res.code === 0) {
						this.activity = res.data;
						this.initData();
					}
				})
			},
			initData() {
				this.imgs = this.activity.smallImages.split(',');
				this.labels = this.activity.labels.split(',');
				let timeList = this.activity.startTime.split(' ');
				this.date = timeList[0];
				this.getWeek();
				// this.time = timeList[1];
				console.log(this.activity.startTime);
				let location = this.activity.place.split(',');
				this.poi = {
					name: location[0],
					address: location[1],
					location: {
						latitude: this.activity.lat,
						longitude: this.activity.lon
					}
				};
				switch (this.activity.score) {
					case 0:
						this.score = 0;
						break;
					case 100:
						this.score = 1;
						break;
					case 200:
						this.score = 2;
						break;
					case 300:
						this.score = 3;
						break;
					case 400:
						this.score = 4;
						break;
					case 500:
						this.score = 5;
						break;
					case 600:
						this.score = 6;
						break;
					case 700:
						this.score = 7;
						break;
				}
			},
			choosePlace() {
				uni.navigateTo({
					url: '/pages/choosePlace?type=1'
				})
			},
			dateChange(e) {
				this.date = e.detail.value;
			},
			getWeek() {
				const date = new Date(this.date);
				switch (date.getDay()) {
					case 0:
						this.week = '周日';
						break;
					case 1:
						this.week = '周一';
						break;
					case 2:
						this.week = '周二';
						break;
					case 3:
						this.week = '周三';
						break;
					case 4:
						this.week = '周四';
						break;
					case 5:
						this.week = '周五';
						break;
					case 6:
						this.week = '周六';
						break;
				}
			},
			timeChange(e) {
				this.time = e.detail.value;
			},
			sexChange(e) {
				this.activity.sex = e.detail.value;
			},
			scoreChange(e) {
				this.score = e.detail.value;
			},
			addLabel() {
				uni.navigateTo({
					url: '/pages/interestChoose?type=1&labels=' + this.labels.join(',')
				})
			},
			addImage() {
				uni.chooseImage({
					count: this.maxImgNum - this.imgs.length,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (ret) => {
						const params = {
							files: ret.tempFilePaths
						}
						this.$apis.uploadFiles(params).then((res) => {
							if (res.code === 0) {
								res.data.forEach(item => {
									this.imgs.push(item.url);
								})
							}
						});
					}
				})
			},
			removeImage(img) {
				if (this.activity.cover === img) {
					this.activity.cover = '';
				}
				let index = this.imgs.findIndex(item => item === img);
				this.imgs.splice(index, 1);
			},
			chooseCover(img) {
				this.activity.cover = img;
			},
			back() {
				uni.navigateBack();
			},
			publishActivity() {
				if (!this.activity.name) {
					uni.showToast({
						title: '请输入活动名称',
						icon: 'none'
					})
					return;
				}
				if (!this.date || this.time === '请选择时间') {
					uni.showToast({
						title: '请选择活动时间',
						icon: 'none'
					})
					return;
				}
				if (!this.activity.maxPerson) {
					uni.showToast({
						title: '请输入最大参与人数',
						icon: 'none'
					})
					return;
				}
				if (!this.activity.cost) {
					uni.showToast({
						title: '请输入人均费用',
						icon: 'none'
					})
					return;
				}
				if (!this.activity.description) {
					uni.showToast({
						title: '请输入活动简介',
						icon: 'none'
					})
					return;
				}
				if (this.labels.length < 1) {
					uni.showToast({
						title: '请添加活动标签',
						icon: 'none'
					})
					return;
				}
				if (this.imgs.length < 1) {
					uni.showToast({
						title: '请上传活动图片',
						icon: 'none'
					})
					return;
				}
				if (!this.activity.cover) {
					uni.showToast({
						title: '请选择活动封面',
						icon: 'none'
					})
					return;
				}
				this.activity.place = `${this.poi.name},${this.poi.address}`;
				this.activity.startTime = new Date(`${this.date} ${this.time}`);
				this.activity.lat = this.poi.location.latitude;
				this.activity.lon = this.poi.location.longitude;
				switch (this.score) {
					case 0:
						this.activity.score = 0;
						break;
					case 1:
						this.activity.score = 100;
						break;
					case 2:
						this.activity.score = 200;
						break;
					case 3:
						this.activity.score = 300;
						break;
					case 4:
						this.activity.score = 400;
						break;
					case 5:
						this.activity.score = 500;
						break;
					case 6:
						this.activity.score = 600;
						break;
					case 7:
						this.activity.score = 700;
						break;
				}
				this.activity.labels = this.labels.join(',');
				this.activity.smallImages = this.imgs.join(',');
				if (this.edit) {
					this.$apis.updateActivity(this.activity).then((res) => {
						if (res.code === 0) {
							uni.$emit('editActivity', this.activity.id);
							uni.showToast({
								title: '发布成功!',
								icon: 'success'
							})
							uni.navigateBack();
						}
					});
				} else {
					this.$apis.publishActivity(this.activity).then((res) => {
						if (res.code === 0) {
							uni.showToast({
								title: '发布成功!',
								icon: 'success'
							})
							uni.navigateBack();
						}
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	.main-box {
		width: 100vw;
		height: 100vh;
		background-color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow: hidden;

		.navigator-bar {
			width: 100vw;
			height: 86rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.back-img {
				width: 24rpx;
				height: 40rpx;
				margin-left: 42rpx;
				z-index: 999;
			}

			.page-title {
				font-size: 38rpx;
				font-weight: bold;
				color: #222222;
				position: absolute;
				width: 100vw;
				line-height: 38rpx;
				text-align: center;
			}

			.submit-button {
				margin-right: 42rpx;
				width: 123rpx;
				height: 61rpx;
				background: #FF5E2E;
				border-radius: 31rpx;
				font-size: 31rpx;
				line-height: 61rpx;
				text-align: center;
				font-weight: 400;
				color: #FFFFFF;
				z-index: 999;
			}
		}

		.activity-content-list {
			width: 100%;
			height: calc(100% - 200rpx);
			padding: 0 48rpx 0 48rpx;

			.line {
				width: 654rpx;
				height: 2rpx;
				margin-left: 48rpx;
				background: #F0F3F6;
			}

			.content-item-box {
				width: 654rpx;
				margin-left: 48rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 34rpx 0 34rpx 0;

				.name-input {
					font-size: 32rpx;
					font-weight: 400;
					color: #222222;
					width: 100%;
				}

				.content-input {
					text-align: end;
					margin-right: 20rpx;
				}

				.item-title {
					font-size: 32rpx;
					font-weight: 400;
					color: #999999;
				}

				.item-content-box {
					font-size: 32rpx;
					font-weight: 400;
					color: #222222;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					.arrow-img {
						margin-left: 24rpx;
						width: 12rpx;
						height: 24rpx;
					}

					.location-img {
						width: 32rpx;
						height: 40rpx;
					}

					.collect-img {
						margin-left: 40rpx;
						width: 40rpx;
						height: 38rpx;
					}
				}
			}

			.content-box {
				padding-bottom: 32rpx;

				.introduction-input {
					width: 654rpx;
					height: 250rpx;
					margin-left: 48rpx;
					font-size: 32rpx;
					font-weight: 400;
					color: #222222;
				}

				.location-box {
					width: 654rpx;
					height: 144rpx;
					margin-left: 48rpx;
					background: #FFFFFF;
					box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
					border-radius: 28rpx;
					display: flex;
					align-items: center;

					.location-img {
						width: 80rpx;
						height: 80rpx;
						margin-left: 40rpx;
						margin-right: 40rpx;
					}

					.location-content-box {
						display: flex;
						flex-direction: column;
						justify-content: flex-start;

						.location-title {
							font-size: 32rpx;
							font-weight: bold;
							color: #222222;
						}

						.location-text {
							margin-top: 8rpx;
							width: 400rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: #999999;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}

				.labels-box {
					width: 680rpx;
					margin-left: 48rpx;
					display: flex;
					flex-wrap: wrap;

					.label {
						width: 144rpx;
						height: 64rpx;
						border-radius: 32rpx;
						border: 2rpx solid #F0F3F6;
						font-size: 28rpx;
						font-weight: 400;
						color: #222222;
						text-align: center;
						line-height: 64rpx;
						margin-right: 22rpx;
						margin-bottom: 18rpx;
					}

					.add-label {
						width: 144rpx;
						height: 64rpx;
						border-radius: 32rpx;
						border: 2rpx solid #F0F3F6;
						font-size: 50rpx;
						font-weight: 400;
						color: #DDDDDD;
						text-align: center;
						line-height: 64rpx;

						.add-label-img {
							width: 36rpx;
							height: 36rpx;
						}
					}
				}

				.img-list-box {
					width: 680rpx;
					margin-left: 48rpx;
					display: flex;
					align-items: flex-start;
					flex-wrap: wrap;

					.img-item {
						margin-right: 18rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						margin-bottom: 18rpx;

						.img-box {
							position: relative;

							.img {
								width: 150rpx;
								height: 150rpx;
								border-radius: 28rpx;
							}

							.close-img {
								width: 42rpx;
								height: 42rpx;
								position: absolute;
								top: 8rpx;
								right: 8rpx;
							}
						}

						.cover {
							width: 120rpx;
							height: 48rpx;
							border-radius: 26rpx;
							border: 2rpx solid #FF5E2E;
							font-size: 24rpx;
							font-weight: 400;
							color: #FF5E2E;
							line-height: 48rpx;
							text-align: center;
						}

						.choose-cover {
							width: 120rpx;
							height: 48rpx;
							background: #FFFFFF;
							border-radius: 26rpx;
							border: 2rpx solid #F0F3F6;
							font-size: 24rpx;
							font-weight: 400;
							color: #999999;
							line-height: 48rpx;
							text-align: center;
						}
					}

					.add-img-box {
						width: 150rpx;
						height: 150rpx;
						border-radius: 28rpx;
						border: 2rpx solid #F0F3F6;
						display: flex;
						align-items: center;
						justify-content: center;

						.add-img {
							width: 36rpx;
							height: 36rpx;
						}
					}
				}
			}
		}
	}
</style>
